<template>
  <div class="columnFlex">
    <van-row class="listCon">
      <van-pull-refresh
        class="pullRefresh"
        v-model="refreshLoading"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="listData.length ? '没有更多了' : ''"
          @load="onLoad"
        >
          <van-swipe-cell v-for="item in listData" :key="item.commentId">
            <div class="cellContent">
              <div class="buyer-msg">
                <div class="img">
                  <img
                    src="https://pc.njyima.com/_nuxt/img/buyer-img.a93d972.png"
                    alt=""
                  />
                </div>
                <div class="name">{{ item.commentUserName }}</div>
                <div class="dayData">{{ item.commentTime }}</div>
              </div>
              <div class="star">
                <van-rate v-model="item.descMatchRating" size="15" readonly />
                <span class="attr"
                  >{{ item.goodsName }}{{ item.specName }}</span
                >
              </div>
              <div class="text">
                {{ item.commentContent || "暂无评价" }}
              </div>
              <div class="seller-reply" v-if="item.addCommentContent">
                <div style="font-weight: 600">买家追评：</div>
                <div class="con">{{ item.addCommentContent }}</div>
                <div class="time">{{ item.addCommentTime }}</div>
              </div>
              <div class="seller-reply" v-if="item.replyContent">
                <div style="color: #e1251b">商家回复：</div>
                <div class="con">{{ item.replyContent }}</div>
                <div class="time">{{ item.replyTime }}</div>
              </div>
            </div>
          </van-swipe-cell>
        </van-list>
        <van-empty
          v-if="!loading && !listData.length"
          class="custom-image"
          :image="require('../../../../assets/images/empty.png')"
          description="暂无数据"
        />
      </van-pull-refresh>
    </van-row>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import { queryFileList } from "@/api/common";
import { goodsPage } from "@/api/srvAssurance/shoppingMall/appraise";
export default {
  data() {
    return {
      formData: {
        goodsId: "",
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      finished: false,
      fullscreenModal: false,
      refreshLoading: false,
      listData: [],
      fileUrlObj: {},
    };
  },
  methods: {
    // 获取表格数据
    getData(val) {
      this.formData.goodsId = val;
      this.onRefresh();
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    getSearch() {
      this.loading = true;
      goodsPage(this.formData)
        .then((res) => {
          this.loading = false;
          if (res.code == 1000 && res.data) {
            this.listData = [...this.listData, ...res.data.records];
            if (res.data.records) {
              res.data.records.forEach((val, i) => {
                val.descMatchRating = Number(val.descMatchRating);
              });
            }

            let fileCodeArr = [];
            res.data.records.forEach((val, i) => {
              if (
                val.goodsMainFileCode &&
                !this.fileUrlObj[val.goodsMainFileCode]
              ) {
                fileCodeArr.push(val.goodsMainFileCode);
                this.fileUrlObj[val.goodsMainFileCode] = "";
              }
            });
            if (fileCodeArr.length) {
              this.queryFileInfoData(fileCodeArr);
            }
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          } else {
            this.finished = true;
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },
    // 获取图片信息
    queryFileInfoData(fileCodeArr) {
      this.loading = true;
      queryFileList(fileCodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.previewUrl;
              setTimeout(() => {
                this.fileUrlObj[item.fileCode] = item.url;
              }, 600);
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    padding: 5px;
    img {
      width: 100%;
      height: 100%;
    }
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      float: left;
    }
    .bottom {
      margin-top: 3px;
      padding: 3px 10px 0;
      border-top: 1px solid #eee;
      clear: both;
    }
    .other {
      margin: 1px;
      text-align: right;
      font-size: 13px;
      float: right;
    }

    .buyer-msg {
      display: flex;
      align-items: center;
      font-size: 13px;
    }
    .buyer-msg .img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
    }
    .buyer-msg .name {
      margin-left: 10px;
    }
    .buyer-msg .dayData {
      text-align: right;
      flex: auto;
      color: #999;
    }
    .attr {
      margin-left: 15px;
      font-size: 14px;
      color: #999;
    }
  }
  .flex {
    clear: both;
  }
}
.columnFlex {
  height: 100%;
}
</style>
